<template>
	<view class="container">
		<!-- 用户信息 -->
		<view class="user_section">
			<view class="user_set" @click="set">
				<u-icon color="#fff" name="setting" size="24px"></u-icon>
			</view>
			<!-- 背景 -->
			<image src="../../static/img/userCenter/user_bg.png" class="bg">
			</image>
			<!-- 信息 -->
			<view class="user_info_box">
				<!-- 登陆 -->
				<view class="login">
					<!-- 头像框 -->
					<view class="head_portrai_box">
						<image :src="userInfo.avatar ? userInfo.avatar : defaultHeadImgUrl" mode=""></image>
					</view>
					<!-- H5登录 -->
					<!-- #ifdef H5 -->
					<!-- <view class="login_button" @tap="goToLogin">
						{{ token ? nickname : '立即登录' }}
					</view> -->
					<view class="login_button" @tap="goToWXLogin">
						{{ token ? userInfo.nickname : '立即登录' }}
					</view>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->

					<!-- #endif -->
				</view>
				<!-- 会员 -->
				<view class="vip">
					<view class="vip_info">
						<view>
							<u-icon name="level" color="#CD7F32" size="30px"></u-icon>
						</view>
						<view class="vip_level">钱包</view>
						<view @tap="goToOpen" v-if="!isOpenedAccount">
							<view class="open_vip">
								立即开通
							</view>
						</view>
					</view>
					<!-- 会员权限 -->
					<view class="vip_equity">
						<text>VIP权益</text>
						<view class="open">
							请联系管理员开通
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 功能部分 -->
		<view class="cover-container" :style="[{
				transform: coverTransform,
				transition: coverTransition
			}]" @touchstart="coverTouchstart" @touchmove="coverTouchmove" @touchend="coverTouchend">
			<image class="arc" src="../../static/img/userCenter/arc.png"></image>
			<view class="option_section">
				<!-- 资产 -->
				<view class="assets_box">
					<view class="assets_box_item" @tap="goToWallet">
						<view class="assets_num">{{hy_balance}}</view>
						<text>{{ccyName}}</text>
					</view>
					<view class="assets_box_item" @tap="goToForce">
						<view class="assets_num">{{yl_balance}}</view>
						<text>原力</text>
					</view>
					<view class="assets_box_item" @tap="goToReputation">
						<view class="assets_num">{{hs_balance}}</view>
						<text>声誉</text>
					</view>
				</view>
				<!-- 功能 -->
				<view class="function_box">
					<view @tap="goToPayment" class="function_box_item">
						<view>
							<image src="../../static/img/userCenter/pay.png"></image>
						</view>
						<text>支付</text>
					</view>
					<view @tap="goToTransfer" class="function_box_item">
						<view>
							<image src="../../static/img/userCenter/transfer.png"></image>
						</view>
						<text>转账</text>
					</view>
					<view @tap="goToRecharge" class="function_box_item">
						<view>
							<image src="../../static/img/userCenter/recharge.png"></image>
						</view>
						<text>充值</text>
					</view>
				</view>
				<!-- 设置 -->
				<view class="set_box">
					<list-cell v-for="item in listCell" :key="item.func" :listName="item.listName" :imgSrc="item.src"
						@changeFunc="changeFunc(item.func)"></list-cell>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let startY = 0,
		moveY = 0,
		pageAtTop = true;
	import {
		getUserInfo
	} from '@/config/api.js';
	import {
		getWalletDetail,
		transferAccounts
	} from '@/config/walletApi.js'
	export default {
		data() {
			return {
				// 本地缓存code
				localCode: '',
				urlCode: '',
				// 默认头像
				defaultHeadImgUrl: '../../static/img/logo.png',
				appid: '',
				wxRedirectUrl: '',
				coverTransform: 'translateY(0px)',
				coverTransition: '0s',
				moving: false,
				ccy: '',
				ccyName: '',
				// 客户号
				customerNo: '',
				// token
				token: '',
				// 是否开通钱包
				isOpenedAccount: 0,
				// 账户余额
				hy_balance: 0,
				yl_balance: 0,
				hs_balance: 0,
				// 授权用户信息
				userInfo: {
					nickname: '',
					avatar: ''
				},
				// 设置列表
				listCell: [{
						listName: '我的订单',
						src: '../../static/img/userCenter/order.png',
						func: 'order'
					},
					{
						listName: '我的NFT',
						src: '../../static/img/userCenter/nft.png',
						func: 'nft'
					},
					{
						listName: '我的任务',
						src: '../../static/img/userCenter/task.png',
						func: 'task'
					},
					{
						listName: '我的权益',
						src: '../../static/img/userCenter/task.png',
						func: 'rightsInterests'
					},
					{
						listName: '我的选举',
						src: '../../static/img/userCenter/vote.png',
						func: 'vote'
					},
					{
						listName: '我的提案',
						src: '../../static/img/userCenter/proposal.png',
						func: 'proposal'
					},
					{
						listName: '我的评选',
						src: '../../static/img/userCenter/proposal.png',
						func: 'selection'
					},
					{
						listName: '社区Poap',
						src: '../../static/img/userCenter/poap.png',
						func: 'poap'
					},
				]
			};
		},
		async onShow() {
			console.log('每次进入页面触发逻辑')
			var tenantId = getApp().globalData.tenantId

			// 重定向进页面取url code
			this.urlCode = this.getURL('code');
			// 如果url有code
			if (this.urlCode) {
				// 看缓存里面有没有
				this.localCode = uni.getStorageSync('localCode')
				console.log('this.localCode', this.localCode)
				console.log('this.urlCode', this.urlCode)
				// 如果有且不相等 说明是登录之后重新授权跳转过来
				if (this.urlCode !== this.localCode) {
					console.log('第一次登录')
					// 请求接口获取信息
					await getUserInfo({
						code: this.urlCode,
						tenantId
					}).then(res => {
						console.log('res', res)
						if (res) {
							// 将urlCode存在本地变为localCode 用于下一次进入的时候判断是不是第一次登陆
							uni.setStorageSync('localCode', this.urlCode);
							// 存储openid，支付需要
							uni.setStorageSync('openid', res?.data?.userInfo?.credential);
							// 存储userInfo, 用于回显名字头像
							console.log('res?.data?.userInfo', res?.data?.userInfo)
							uni.setStorageSync('userinfo', res?.data?.userInfo)
							var customerNoTemp = res?.data?.userInfo?.customerNo;
							uni.setStorageSync('customerNo', customerNoTemp);
							// 存储token
							uni.setStorageSync('token', res?.data?.token);
							// 存储是否开通钱包
							uni.setStorageSync('isOpenedAccount', res?.data?.isOpenedAccount);
							// 用于判断是否登陆
							this.token = res?.data?.token
							// 用于请求获取余额
							this.customerNo = customerNoTemp
							// 是否开通钱包
							this.isOpenedAccount = res?.data?.isOpenedAccount
							// 数据回显示 头像 名字
							this.userInfo.nickname = res?.data?.userInfo?.nickname
							this.userInfo.avatar = res?.data?.userInfo?.avatar

							// 处理客户的账户信息，放到缓存
							uni.setStorageSync('customerTokenInfo', res?.data?.customerTokenInfo);
						}
					})
				} else {
					console.log('登录之后再次进入')
					// 再次获取用户最新个人信息
					// 相等就是从其他页面进来的,取本地的信息
					let localUserinfo = uni.getStorageSync('userinfo')
					let localToken = uni.getStorageSync('token')
					let localIsOpenedAccount = uni.getStorageSync('isOpenedAccount')
					let localCustomerNo = uni.getStorageSync('customerNo')
					// 回显信息
					this.userInfo.nickname = localUserinfo?.nickname
					this.userInfo.headImgUrl = localUserinfo?.headImgUrl
					this.token = localToken
					this.isOpenedAccount = localIsOpenedAccount
					this.customerNo = localCustomerNo
				}
				// 如果登陆成功
				if (this.token) {
					console.log('我是token', this.token)
					// 登陆之后
					if (!this.isOpenedAccount) {
						return
					}
					// token存在的话请求余额参数
					getWalletDetail({
						customerNo: this.customerNo,
						ccy: this.ccy
					}).then(res => {
						if (res)
							this.hy_balance = res.data.balance
							// 更新余额缓存
							uni.setStorageSync('customerTokenInfo', res?.data);
					})
					// 原力余额
					getWalletDetail({
						customerNo: this.customerNo,
						ccy: 'fc'
					}).then(res => {
						if (res)
							this.yl_balance = res.data.balance
					})
				}
			}
		},
		created() {
			// 火源余额
			this.appid = getApp().globalData.appid
			this.wxRedirectUrl = getApp().globalData.wxRedirectUrl
			this.ccy = getApp().globalData.ccy
			this.ccyName = getApp().globalData.ccyName
		},
		methods: {
			set() {
				if (!this.token) {
					uni.$u.toast('请先登陆')
					return
				}
				uni.navigateTo({
					url: "/pages/set/set"
				})
			},
			coverTouchstart(e) {
				if (pageAtTop === false) {
					return;
				}
				this.coverTransition = 'transform .1s linear';
				startY = e.touches[0].clientY;
			},
			coverTouchmove(e) {
				moveY = e.touches[0].clientY;
				let moveDistance = moveY - startY;
				if (moveDistance < 0) {
					this.moving = false;
					return;
				}
				this.moving = true;
				if (moveDistance >= 80 && moveDistance < 100) {
					moveDistance = 80;
				}

				if (moveDistance > 0 && moveDistance <= 80) {
					this.coverTransform = `translateY(${moveDistance}px)`;
				}
			},
			coverTouchend() {
				if (this.moving === false) {
					return;
				}
				this.moving = false;
				this.coverTransition = 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)';
				this.coverTransform = 'translateY(0px)';
			},
			// 登陆
			// H5登陆
			goToLogin() {
				this.token ? null : uni.navigateTo({
					url: "/pages/login/login"
				})
			},
			// 微信登陆
			goToWXLogin() {
				// 有urlCode什么也不做,是立即登陆往下执行
				if (this.token) {
					return
				}
				// 不存在code跳转登陆换取code
				window.location.wxRedirectUrl =
					`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${this.appid}&redirect_uri=${wxRedirectUrl}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redire`
			},
			// 取code方法
			getURL(name) {
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
				var r = window.location.search.substr(1).match(reg);
				if (r != null) return unescape(r[2]);
				return null;
			},
			// 钱包
			goToWallet() {
				if (!this.isOpenedAccount) {
					uni.$u.toast('请先开通钱包')
					return
				}
				uni.navigateTo({
					url: "/pages/userCenter/wallet"
				})
			},
			// 原力
			goToForce() {
				if (!this.isOpenedAccount) {
					uni.$u.toast('请先开通钱包')
					return
				}
				uni.navigateTo({
					url: `/pages/userCenter/force?yl_balance=${this.yl_balance}`
				})
			},
			//声誉
			goToReputation() {
				if (!this.isOpenedAccount) {
					uni.$u.toast('请先开通钱包')
					return
				}
				uni.navigateTo({
					url: "/pages/userCenter/reputation"
				})
			},
			// 支付
			goToPayment() {
				if (!this.isOpenedAccount) {
					uni.$u.toast('请先开通钱包')
					return
				}
				uni.navigateTo({
					url: "/pages/userCenter/payment"
				})
			},
			// 转账
			goToTransfer() {
				if (!this.isOpenedAccount) {
					uni.$u.toast('请先开通钱包')
					return
				}
				uni.navigateTo({
					url: "/pages/userCenter/transfer"
				})
			},
			// 充值
			goToRecharge() {
				if (!this.isOpenedAccount) {
					uni.$u.toast('请先开通钱包')
					return
				}
				uni.navigateTo({
					url: "/pages/userCenter/recharge"
				})
			},
			// 开通
			goToOpen() {
				console.log("点击开通钱包")
				/* if (!this.token) {
					uni.$u.toast('请先登陆')
					return
				} */
				uni.navigateTo({
					url: "/pages/userCenter/open"
				})
			},
			// 退出
			exit() {
				uni.clearStorageSync();
				uni.navigateTo({
					url: "/pages/login/login"
				})
				// 清除积分
				this.hy_balance = 0
				this.yl_balance = 0
				this.hs_balance = 0
			},
			// 操作判断
			changeFunc(val) {
				// if (!this.token) {
				// 	uni.$u.toast('请先登陆')
				// 	return
				// }
				switch (val) {
					case 'order':
						uni.navigateTo({
							url: "/pages/my/myOrder"
						})
						break;
					case 'nft':
						uni.navigateTo({
							url: "/pages/my/myNft"
						})
						break;
					case 'task':
						uni.navigateTo({
							url: "/pages/my/myTask"
						})
						break;
					case 'rightsInterests':
						uni.navigateTo({
							url: "/pages/my/myRightsInterests"
						})
						break;
					case 'vote':
						uni.navigateTo({
							url: "/pages/my/myVote"
						})
						break;
					case 'proposal':
						uni.navigateTo({
							url: "/pages/my/myProposal"
						})
						break;
					case 'selection':
						uni.navigateTo({
							url: "/pages/my/selection"
						})
						break;
					case 'poap':
						uni.navigateTo({
							url: "/pages/my/communityPoap"
						})
						break;
					case 'exit':
						this.exit()
						break;
					default:
						console.log(2)
				}
			},
		}
	}
</script>

<style lang="scss">
	.user_section {
		height: 600rpx;
		position: relative;
		.user_set {
			position: absolute;
			top: 40rpx;
			right: 40rpx;
			z-index: 99;
		}
		.bg {
			width: 100%;
			height: 100%;
		}

		.user_info_box {
			position: absolute;
			top: 60rpx;
			width: 100%;
			height: 300rpx;

			.login {
				padding: 30rpx;
				display: flex;
				align-items: center;

				.head_portrai_box {
					width: 140rpx;
					height: 140rpx;
					border-radius: 50%;
					margin-right: 40rpx;
					font-size: 40rpx;
					border: 2px solid white;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.login_button {
					color: white;
					font-size: 36rpx;
					font-weight: bold;
				}
			}

			.vip {
				margin: 0 30rpx;
				padding: 30rpx 30rpx;
				background-image: linear-gradient(to left, rgba(0, 0, 0, .7), rgba(0, 0, 0, .8));
				border-radius: 16rpx 16rpx 0 0;

				.vip_info {
					margin-bottom: 40rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.vip_level {
						flex: 1;
						color: #CD7F32;
						font-size: $echo-font-size-conent;
						margin-left: 20rpx;
					}

					.open_vip {
						background-image: linear-gradient(to left, #f9e6af, #ffd465);
						text-align: center;
						border-radius: 20rpx;
						width: 150rpx;
					}
				}

				.vip_equity {

					text {
						color: #CD7F32;
						font-size: $echo-font-size-conent;
					}

					.open {
						color: #777;
						font-size: $echo-font-size-conent;
						margin-top: 16rpx;
						margin-bottom: 40rpx;
					}
				}
			}

		}
	}

	.cover-container {
		position: relative;
		z-index: 2;
		top: -280rpx;

		.arc {
			width: 100%;
			height: 100rpx;
		}

		.option_section {
			background-color: #F9F9F9;
			position: relative;
			top: -20rpx;

			.assets_box {
				padding: 20rpx;
				margin: 0 30rpx;
				background-color: #FFFFFF;
				display: flex;
				justify-content: space-between;

				.assets_box_item {
					width: 30%;
					text-align: center;

					.assets_num {
						font-size: $echo-font-size-conent;
					}

					text {
						margin-top: 10rpx;
						color: #777;
						font-size: $echo-font-size-conent;
					}
				}

			}

			.function_box {
				display: flex;
				justify-content: space-between;
				padding: 40rpx 40rpx;
				margin: 30rpx;
				background-color: #FFFFFF;

				.function_box_item {
					width: 33.3%;
					text-align: center;
					font-size: 28rpx;

					image {
						width: 80rpx;
						height: 80rpx;
					}
				}

			}

			.set_box {
				margin: 30rpx;
				background-color: #FFFFFF;
				font-size: 28rpx;
			}
		}
	}
</style>
